<template>
  <div id="orderlist" class="containner">
    <div class="text-left text-lg gray bold">我的订单</div>
    <!--  遍历订单  -->
    <div class="mt-20 px-20 py-20 rounded box-shadow" v-for="ord of order.order_list" :key="ord.id">
      <!--  订单基本信息  -->
      <div class="flex item-center text-sm gray">
        <div>{{ord.createtime}}</div>
        <div class="ml-20">订单号：{{ord.order_no}}</div>
        <!-- 订单状态 0.已下单 2.已付款 4.已配货 6.已发货 8.已收货 10.已评价 30.退款中 32.已退款 34.退款失败 40.已取消 -->
        <div class="ml-20">订单状态：{{order.order_status[ord.order_status]}}</div>
        <div class="ml-20">支付金额：{{ord.order_payamount}}</div>
      </div>
      <!--  订单商品详情信息  -->
      <div class="flex justify-between item-center text-md dark bg-gray px-20 py-5 cart-header mt-20">
        <div class="mx-5"></div>
        <div class="cart-product mx-5">商品</div>
        <div class="cart-param mx-5">单价</div>
        <div class="cart-param mx-5">数量</div>
        <div class="cart-param mx-5">小计</div>
        <div class="cart-param mx-5"></div>
      </div>
      <!--  遍历订单商品详情列表  -->
      <div class="flex justify-between item-center text-md dark my-10 px-20 py-5 cart-body"
        v-for="(detail,index) of ord.orderDetailList" :key="detail.id">
        <div class="mx-5"></div>
        <!--  购物商品信息  -->
        <div class="cart-product mx-5 flex item-start">
          <img :src="website.base_img_url+detail.odtails_thumburl" width="80px" height="80px" class="rounded hand" />
          <div class="cart-name mx-10 text-left flex-column justify-between item-start">
            <div class="hover-red hand ">{{detail.odtails_name}}</div>
            <div class="cart-sku flex item-center">
              <!--  遍历商品Sku  -->
              <div class="gray text-sm pr-5 hand hover-red" v-for="sku of JSON.parse(detail.odtails_sku)"
                :key="sku.value_id">
                {{sku.value_name}}
              </div>
            </div>
          </div>

        </div>
        <div class="cart-param mx-5">￥{{detail.odtails_price}}</div>
        <div class="cart-param mx-5">{{detail.odtails_count}}</div>
        <div class="cart-param mx-5">￥{{detail.odtails_amount}}</div>
        <div class="cart-param mx-5 hover-red hand"></div>
      </div>
      <!--  订单配送信息  -->
      <div class="flex item-center justify-end mt-20 text-sm gray">
        <div class="ml-20">收货人：{{ord.orderAddress.consignee}}</div>
        <div class="ml-20">联系电话：{{ord.orderAddress.phone}}</div>
        <div class="ml-20">配送地址：{{ord.orderAddress.province}} {{ord.orderAddress.city}} {{ord.orderAddress.district}}
          {{ord.orderAddress.address}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  // 辅助函数
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'

  export default {
    computed: {
      ...mapState(['address', 'cart', 'website', 'order'])
    },
    methods: {
      ...mapActions('order', ['get_order_list'])
    },
    mounted() {
      this.get_order_list();
    }
  }
</script>

<style scoped="scoped">
  .cart-header {
    border: 1px solid #ddd;
  }

  .cart-product {
    width: 600px;
  }

  .cart-param {
    width: 120px;
  }

  .cart-count {
    width: 120px;
    text-align: right;
  }

  .cart-name {
    width: 500px;
    height: 80px;
  }
</style>
